<template>
  <view class="root">
    <template v-if="!showCamera">
      <view class="top-wrapper">
        <view class="content-info top-info">
          <view class="label-text">
            <text class="l-name">陪同民/辅警</text> <text class="t-sub">您可以选择1-3名陪同人员</text>
          </view>
          <view class="police-wrapper">
            <view class="p-item" v-for="(item) in policeCheckboxValue" :key="item">
              <image :src="imgPrefix + policeListMap[item].userImage" class="p-img"></image>
              <image :src="baseImgUrl + 'close-icon.png'" class="close-icon" @click="handleRemovePolice(item)"></image>
              <view class="p-name">
                {{policeListMap[item].userName}}
              </view>
              <view class="p-num">
                {{policeListMap[item].policeUserNo ? policeListMap[item].policeUserNo : '无警号'}}
              </view>
            </view>
            <view class="p-select" @click="handleSelectPolice" v-if="policeCheckboxValue.length <3 ">
              <image class="img-info" :src="baseImgUrl + 'add-police.png'"></image>
              <view class="p-text">
                点击选择
              </view>
            </view>
          </view>
        </view>
        <view class="content-info bottom-info">
          <view class="bottom-inner">
            <view class="label-text">
              <text class="l-name">现场签到照片</text> <text class="t-sub">请拍摄一张现场实时照片</text>
            </view>
            <view class="select-after-img" v-if="resImage">
              <image :src="baseImgUrl + 'close-icon.png'" class="close-icon" @click="resImage = ''"></image>
              <image class="s-img" :src="resImage" mode="" @click="pvwImage([resImage])"></image>
            </view>
            <view v-else class="select-picture" @click="clickChooseImage">
              <!--  <u-upload width="144rpx" height="144rpx" :fileList="form.imgList"
              @afterRead="(info) => afterReadFive(info, 'form', 75)" @delete="(info) => deletePhoto(info, 'form')"
              name="imgList" :maxCount="3" :multiple="true">

            </u-upload> -->
              <image :src="baseImgUrl + 'camera-bg.png'" style="width: 144rpx; height: 144rpx"></image>
              <span class="s-text">点击选择</span>
            </view>
          </view>

          <view class="tips-info">
            <image class="note-img" :src="baseImgUrl + 'notice-bg.png'" mode=""></image>
            <view class="t-info">
              <image class="warn-img" :src="baseImgUrl + 'warn-i.png'"></image>
              <view class="text-title">
                民警检查签到图拍摄规范及要求:
              </view>
            </view>
            <view class="t-item">
              <view class="dot"></view>
              签到图务必站在商家门头招牌前拍摄。
            </view>
            <view class="t-item">
              <view class="dot"></view>
              签到图画面中必须有检查民警、辅警人员、商家负责人。
            </view>
            <view class="t-item">
              <view class="dot"></view>
              签到图中清晰可见商家招牌、检查民警人脸、辅警人员人脸、商家负责人人脸信息，四者缺一不可。
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-wrapper">
        <u-button class="custom-style" text="下一步" @click="handleStartCheck"
          :custom-style="customSubmitStyleFull"></u-button>
      </view>
    </template>

    <canvas canvas-id="firstCanvas" class="canvas" :style="'width:'+canvasW+'px;height: '+canvasH+'px'" />
    <u-popup :show="showCheckItem" mode="bottom" @close="close" @open="open" round="8rpx">
      <view class="tenant-info-wrapper">
        <view class="top-title">
          <view class="p-cancel" @click="handlePoliceSelectCancel">取消</view>
          <view class="p-confirm" @click="handlePoliceSelectConfirm">确认</view>
        </view>
        <view class="search-wrapper">
          <u--input v-model="policeName" placeholder="请填写民警姓名或警号" shape="circle" prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399" @change="handlePolice"></u--input>
        </view>
        <view class="p-container">
          <view class="p-container-inner">
            <u-checkbox-group placement="column">
              <view class="p-item-wrapper-box" v-for="item in obtainAuxiliaryPoliceList" :key="item.id">
                <view class="p-item" @click="handleSelect(item.id)">
                  <view class="p-item-wrapper" :class="{'p-active': currentType === 'phone'}">
                    <view class="p-item-l">
                      <image :src="imgPrefix +item.userImage" class="avatar-img"></image>
                      <view class="p-name-wrapper">
                        <view class="l-name">
                          {{item.userName}}
                        </view>
                        <view class="l-num">
                          警号:{{ item.policeUserNo ? item.policeUserNo : '无'}}
                        </view>
                      </view>
                    </view>
                    <u-checkbox @change="() => {console.log('hihi')}"
                      :disabled="policeCheckboxValueListTemp.length >= 3 && !policeCheckboxValueListTemp.includes(item.id)"
                      :customStyle="{marginBottom: '8px'}" :checked="policeCheckboxValueListTemp.includes(item.id)"
                      label=" " :name="item.id"></u-checkbox>
                  </view>
                </view>
                <u-line></u-line>
              </view>
            </u-checkbox-group>
          </view>
        </view>
      </view>
    </u-popup>

    <u-modal :show="show" confirmText="继续" cancelText="退出" showCancelButton @cancel="handleCancel"
      @confirm="handleContinue">
      <view class="location-wrapper">
        <image class="l-img" :src="baseImgUrl + 'check-location.png'" mode=""></image>
        <view class="l-text">
          当前地点与场所位置偏差较大，
          请实地检查/复查！
        </view>
        <view class="l-sub-text">
          若执意上传，则将该风险提交给上级领导。
        </view>
      </view>
    </u-modal>


    <view class="camera-wrapper" v-if="showCamera">
      <camera :device-position="devicePosition" flash="off" @error="error" class="camear-box">
      </camera>
      <view class="camear-btn">
        <view class="item-x" @click="handleQuitTake">
          <image class="l-img" :src="baseImgUrl + 'quit-img-s.png'"></image>
          <view class="text-s">
            退出拍照
          </view>
        </view>
        <view class="item-x">
          <image :src="baseImgUrl + 'take-img-s.png'" class="take-img" @click="handleTakePicture"></image>
        </view>
        <view class="item-x" @click="handleReverse">
          <image class="r-img" :src="baseImgUrl + 'reserve-img-s.png'"></image>
          <view class="text-s">
            镜头反转
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getObtainAuxiliaryPolice
  } from '../api/api'
  import uploadFileMixin from '../utils/upload-file-mixin'
  import {
    Toast,
    computedDistance,
    customSubmitStyleFull,
    getLocation,
    getOptionsParams,
    getposition,
    isLoading,
    navBack,
    navTo,
    pvwImage,
    uploadFile
  } from '@/utils/util.js'
  import {
    mapState
  } from 'vuex'
  import _ from '@/utils/lodash.js'
  import moment from '../utils/moment'

  export default {
    mixins: [uploadFileMixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync('imgPrefix'),
        form: this.initForm(),
        customSubmitStyleFull,
        showCheckItem: false,
        // 图片添加水印
        resImage: '',
        canvasW: 0,
        canvasH: 0,
        routerParams: {},
        obtainAuxiliaryPoliceList: [],
        obtainAuxiliaryPoliceListRaw: [], // 所有的民辅警
        latlng: {},
        user: uni.getStorageSync('user'),
        policeName: '',
        policeCheckboxValueListTemp: [], // 存放临时选中的值
        showCamera: false,
        cameraContext: {},
        devicePosition: 'back',
        show: false,
        tempImagePath: ''
      }
    },
    computed: {
      // 过滤出选中的 民辅警
      selectedPolice() {
        return this.obtainAuxiliaryPoliceList.filter((item) => this.policeCheckboxValue.includes(item.id))
      },
      policeListMap() {
        return this.obtainAuxiliaryPoliceListRaw.reduce((acc, curr) => {
          acc[curr.id] = {
            ...curr
          }
          return acc
        }, {})
      },
      policeCheckboxValue: {
        get() {
          return this.$store.state.policeCheckboxValue
        },
        set(newVal) {
          // 合并一下数组
          // let checkValue = [...new Set([...this.policeCheckboxValue, ...newVal])]
          this.$store.commit('SET_POLICE_CHECKBOX_VALUE', newVal)
        }
      }
    },
    watch: {
      policeCheckboxValue(newVal) {
        if (this.tempImagePath) {
          this.addWaterMark(this.tempImagePath)
        }
      }
    },
    async onLoad(options) {
      this.routerParams = getOptionsParams(options)
      console.log(this.routerParams)
      try {
        uni.showLoading({
          title: '正在获取当前位置信息，请稍等！'
        })
        let resLocation = await getposition()
        this.latlng = {
          ...resLocation,
          lng: resLocation.longitude,
          lat: resLocation.latitude
        }
      } finally {
        uni.hideLoading()
      }
      this.initData()

      if (uni.createCameraContext) {
        this.cameraContext = uni.createCameraContext();
      } else {
        // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
        uni.showModal({
          title: "提示",
          content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
        });
      }

      this.checkPosition()
    },
    onUnload() {
      // 卸载的时候清空
      this.$store.commit('INIT_RADIOVALUE', [])
      this.$store.commit('INIT_EVIDENCE_LIST', [])
      this.$store.commit('SET_POLICE_CHECKBOX_VALUE', [])
      this.$store.commit('SET_CRIME_IMG', '')
    },
    methods: {
      pvwImage,
      initForm() {
        return {
          imageList: []
        }
      },
      close() {
        this.showCheckItem = false
      },
      open() {},
      handleSelect(id) {
        // 如果没有就 push
        const index = this.policeCheckboxValueListTemp.indexOf(id)
        // 在里面
        if (~index) {
          // 取消掉
          if (this.policeCheckboxValueListTemp.length <= 3) {
            this.policeCheckboxValueListTemp.splice(index, 1)
          }
        } else {
          // 不在里面
          if (this.policeCheckboxValueListTemp.length >= 3) {
            Toast('最多只可以选择三个民/辅警！')
          } else {
            this.policeCheckboxValueListTemp.push(id)
          }
        }
      },
      clickChooseImage() { // 选择图片
        this.showCamera = true
      },
      addWaterMark(path) {
        return new Promise((resolve, reject) => {
          uni.getImageInfo({
            src: path,
            success: res => {
              let ctx = uni.createCanvasContext('firstCanvas');
              //设置画布宽高
              this.canvasW = res.width
              this.canvasH = res.height
              ctx.drawImage(path, 0, 0, res.width, res.height)
              //水印框的大小
              let w = this.canvasW - 50
              let h = 175
              //水印框左上角坐标
              let x = 30
              let y = res.height - 200
              //圆角半径
              let r = 10

              let time = moment(new Date()).format('YYYY/MM/DD HH:mm:ss')
              let checkType = `检查类型: ${this.routerParams.checkName}`
              let police = `检查辅警: ${this.user.userName}`
              let accompanyPerson = `陪同民辅警: ${this.selectedPolice.map(item => item.userName).join('，')}`
              let inspectEnterprise = `检查单位: ${this.routerParams.companyName}`
              let inspectTime = `检查时间: ${time}`
              let address = `检查地点: ${this.latlng.address}`
              let lnglat = `经 纬 度:${this.latlng.lng.toFixed(6)},${this.latlng.lat.toFixed(6)}`


              const textMetrics = ctx.measureText(address);
              ctx.setFontSize(14);
              const textWidth = textMetrics.width + 140;
              w = textWidth
              console.log(textWidth)
              ctx.beginPath()
              // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
              ctx.setFillStyle('transparent')
              // 左上角
              ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

              // border-top
              ctx.moveTo(x + r, y)
              ctx.lineTo(x + w - r, y)
              ctx.lineTo(x + w, y + r)
              // 右上角
              ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

              // border-right
              ctx.lineTo(x + w, y + h - r)
              ctx.lineTo(x + w - r, y + h)
              // 右下角
              ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

              // border-bottom
              ctx.lineTo(x + r, y + h)
              ctx.lineTo(x, y + h - r)
              // 左下角
              ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

              // border-left
              ctx.lineTo(x, y + r)
              ctx.lineTo(x + r, y)

              // 这里是使用 fill 或者 stroke都可以
              ctx.fill()
              // ctx.stroke()
              ctx.closePath()
              // 剪切
              ctx.clip()
              ctx.setFillStyle('rgba(0, 0,0, 0.3)')
              ctx.fillRect(x, y, w, h)

              //字体加粗真机不起作用?
              //ctx.font = "normal bold 50px Arial"
              ctx.setFontSize(14); // 设置字体大小
              ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
              ctx.fillText(checkType, x + 30, y + 23 * 1);

              ctx.setFontSize(14); // 设置字体大小
              ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
              ctx.fillText(police, x + 30, y + 23 * 2);


              ctx.setFontSize(14); // 设置字体大小
              ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
              ctx.fillText(accompanyPerson, x + 30, y + 23 * 3);


              // ctx.setFontSize(14); // 设置字体大小
              // ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
              // ctx.fillText(auxiliaryPolice, x + 30, y + 23 * 2);

              ctx.setFontSize(14); // 设置字体大小
              ctx.setFillStyle('#fff')
              ctx.fillText(inspectEnterprise, x + 30, y + 23 * 4);

              ctx.setFontSize(14); // 设置字体大小
              ctx.setFillStyle('#fff')
              ctx.fillText(inspectTime, x + 30, y + 23 * 5);

              ctx.setFontSize(14); // 设置字体大小
              ctx.setFillStyle('#fff')
              ctx.fillText(address, x + 30, y + 23 * 6);

              ctx.setFontSize(14); // 设置字体大小
              ctx.setFillStyle('#fff')
              ctx.fillText(lnglat, x + 30, y + 23 * 7);

              ctx.draw(false, () => {
                uni.showLoading({
                  title: '正在生成水印照片'
                })
                setTimeout(() => {
                  uni.canvasToTempFilePath({
                    canvasId: 'firstCanvas',
                    destWidth: this.canvasW, //展示图片尺寸=画布尺寸1*像素比2
                    destHeight: this.canvasH,
                    success: res1 => {
                      uni.hideLoading()
                      this.resImage = res1.tempFilePath
                      resolve(this.resImage)
                    },
                    fail: (err) => {
                      console.log(err)
                      Toast('水印添加失败，请重试')
                      uni.hideLoading()
                      reject(err)
                    }
                  });
                }, 300)
              })
            },
            fail: (err) => {
              console.log(err)
              Toast('获取图片信息失败，请重试！')
            }
          })
        })
      },
      initData() {
        getObtainAuxiliaryPolice({
            companyId: this.routerParams.companyId
          })
          .then((res) => {
            if (res.code == 200) {
              this.obtainAuxiliaryPoliceListRaw = res.result
              this.obtainAuxiliaryPoliceList = res.result
            } else {
              Toast(res.message)
            }
          })
      },
      handleRemovePolice(id) {
        // 删除选中的 id 
        let index = this.policeCheckboxValue.findIndex(item => item === id)
        const policeCheckboxValueTemp = _.cloneDeep(this.policeCheckboxValue)
        if (~index) {
          policeCheckboxValueTemp.splice(index, 1)
          this.$store.commit('SET_POLICE_CHECKBOX_VALUE', policeCheckboxValueTemp)
        }
      },
      handleStartCheck() {
        // 检查选择
        if (!this.selectedPolice.length) {
          Toast('请选择民/辅警！')
          return
        }
        // if (!this.resImage) {
        //   Toast('请上传现场签到照片！')
        //   return
        // }
        navTo({
          url: '/venueInspection/inspectionContent',
          params: this.routerParams
        })
      },
      handlePolice(value) {
        const params = {
          companyId: this.routerParams.companyId,
          policeUserName: value ? value.trim() : value
        }
        isLoading(true)
        getObtainAuxiliaryPolice(params)
          .then((res) => {
            if (res.code === 200) {
              this.obtainAuxiliaryPoliceList = res.result
            } else {
              Toast(res.message)
            }
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handlePoliceSelectCancel() {
        this.showCheckItem = false
        this.policeName = ''
        this.obtainAuxiliaryPoliceList = [...this.obtainAuxiliaryPoliceListRaw]
        // 取消的时候也清空临时的值
        this.policeCheckboxValueListTemp = []
      },
      handlePoliceSelectConfirm() {
        // 确定的时候再 修改值
        this.$store.commit('SET_POLICE_CHECKBOX_VALUE', [...this.policeCheckboxValueListTemp])
        // 清空临时的池子
        this.policeCheckboxValueListTemp = []
        this.showCheckItem = false
        this.policeName = ''
        this.obtainAuxiliaryPoliceList = [...this.obtainAuxiliaryPoliceListRaw]
      },
      handleSelectPolice() {
        this.showCheckItem = true
        // 把已经选中的赋值 给当前缓存的值
        this.policeCheckboxValueListTemp = [...this.policeCheckboxValue]
      },
      error(e) {
        Toast('拍照失败，请重试！')
      },
      handleTakePicture() {
        uni.showLoading({
          title: "拍摄中",
        });
        this.cameraContext.takePhoto({
          success: async (res) => {
            // 上传签名照片
            try {
              this.tempImagePath = res.tempImagePath
              let path = await this.addWaterMark(res.tempImagePath);
              isLoading(true)
              let uploadRes = await uploadFile({
                url: "/web/sys/upload/upload_file",
                filePath: path,
                name: "file",
                formData: {
                  type: 21,
                },
              })
              let {
                fullPath,
                halfPath
              } = uploadRes.result;
              this.resImage = fullPath
              this.$store.commit('SET_CRIME_IMG', halfPath)
            } catch (error) {
              //TODO handle the exception
            } finally {
              this.showCamera = false
              this.devicePosition = 'back'
              isLoading(false)
            }
          },
          fail: (err) => {
            console.log(err)
            uni.showToast({
              title: "拍照失败，请检查系统是否授权",
              icon: "none",
              duration: 1200,
            });
          },
          complete: () => {
            uni.hideLoading()
          }
        })
      },
      handleReverse() {
        if (this.devicePosition === 'back') {
          this.devicePosition = 'front'
        } else if (this.devicePosition === 'front') {
          this.devicePosition = 'back'
        }
      },
      handleQuitTake() {
        this.showCamera = false
        this.devicePosition = 'back'
      },
      handleCancel() {
        this.show = false
        navBack()
      },
      handleContinue() {
        this.show = false
      },
      checkPosition() {
        // 检测当前位置和企业的位置距离
        // 之前保存的实有单位的位置
        const p1 = {
          lat: this.routerParams.companyInfo.lat,
          lng: this.routerParams.companyInfo.lng
        }
        const p2 = {
          ...this.latlng
        }
        if (!p1.lat) {
          Toast('当前单位无经纬度信息！')
          return
        }
        let d = computedDistance(p1.lat, p1.lng, p2.lat, p2.lng)
        if (d > 50) {
          this.show = true
        }
      }
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  /deep/.u-popup {
    flex: unset !important;
  }

  .canvas {
    position: absolute;
    top: -999999rpx;
    width: 100%;
  }

  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .top-wrapper {
      flex: 1;
      padding: 20rpx 16rpx;
      overflow: auto;

      .content-info {
        background: #FFFFFF;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 1rpx solid #EBEDF0;
        margin-bottom: 10rpx;
      }

      .label-text {
        display: flex;
        align-items: center;
        margin-bottom: 17rpx;

        .l-name {
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
          margin-right: 21rpx;
        }

        .t-sub {
          font-weight: 400;
          font-size: 26rpx;
          color: #BBBBBB;
        }
      }

      .police-wrapper {
        display: flex;
        flex-wrap: wrap;

        .p-item {
          position: relative;
          margin-right: 90rpx;

          &:nth-child(3n) {
            margin-right: 0;
          }

          .p-img {
            width: 144rpx;
            height: 144rpx;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
          }

          .p-name {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            text-align: center;
          }

          .p-num {
            font-weight: 400;
            font-size: 28rpx;
            color: #BBBBBB;
            text-align: center;
            margin-top: 6rpx;
          }

          .close-icon {
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            top: -20rpx;
            right: -20rpx
          }
        }

        .p-select {
          display: flex;
          flex-direction: column;

          .img-info {
            width: 144rpx;
            height: 144rpx;
            border-radius: 4rpx;
          }

          .p-text {
            font-weight: 500;
            font-size: 28rpx;
            color: #2488F5;
            text-align: center;
            margin-top: 9rpx;
          }

        }
      }

      .s-text {
        font-weight: 500;
        font-size: 28rpx;
        color: #2488F5;
        text-align: center;
        margin-top: 10rpx;
      }

      .top-info {
        padding: 44rpx 46rpx 52rpx 46rpx;
      }
    }

    .select-after-img {
      position: relative;
      width: 144rpx;

      .s-img {
        width: 144rpx;
        height: 144rpx;
      }

      .close-icon {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: -20rpx;
        right: -20rpx
      }
    }

    .select-picture {
      display: flex;
      flex-direction: column;
      width: 144rpx;
    }

    .bottom-info {
      .bottom-inner {
        padding: 44rpx 46rpx 52rpx 46rpx;
      }
    }

    .tips-info {
      width: 680rpx;
      background: #F9F9F9;
      padding: 28rpx 18rpx 40rpx 34rpx;
      position: relative;
      margin: 0 auto;
      margin-bottom: 40rpx;

      .note-img {
        position: absolute;
        top: 14rpx;
        right: 18rpx;
        width: 210rpx;
        height: 78rpx;
      }

      .t-info {
        display: flex;
        align-items: center;
        margin-bottom: 25rpx;

        .warn-img {
          width: 26rpx;
          height: 26rpx;
          margin-right: 4rpx;
        }

        .text-title {
          font-weight: bold;
          font-size: 26rpx;
          color: #333333;
        }
      }

      .t-item {
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;
        line-height: 48rpx;
        position: relative;
        padding-left: 20rpx;

        .dot {
          width: 6rpx;
          height: 6rpx;
          background: #2488F5;
          border-radius: 50%;
          margin-right: 14rpx;
          position: absolute;
          left: 0;
          top: 21rpx;
        }
      }
    }

    .bottom-wrapper {
      width: 100%;
      height: 120rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .location-wrapper {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .l-img {
        width: 246rpx;
        height: 246rpx;
      }

      .l-text {
        font-weight: bold;
        font-size: 36rpx;
        color: #000000;
        margin-top: 44rpx;
        margin-bottom: 30rpx;
      }

      .l-sub-text {
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
      }
    }

    .camera-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .camear-box {
        flex: 1;
      }

      .camear-btn {
        width: 100%;
        height: 240rpx;
        display: flex;

        .item-x {
          flex: 1;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          .take-img {
            width: 144rpx;
            height: 144rpx;
            border-radius: 50%;
            border: 1px solid;
          }

          .l-img {
            width: 56rpx;
            height: 56rpx;
          }

          .r-img {
            width: 64rpx;
            height: 64rpx;
          }

          .text-s {
            font-weight: 500;
            font-size: 24rpx;
            color: #393939;
            margin-top: 7rpx;
          }
        }
      }
    }

    .tenant-info-wrapper {
      display: flex;
      flex-direction: column;
      padding-top: 30rpx;

      .top-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 134rpx;
        padding: 0 38rpx;

        .p-cancel {
          font-weight: bold;
          font-size: 30rpx;
          color: #333333;
        }

        .p-confirm {
          font-weight: bold;
          font-size: 30rpx;
          color: #2488F5;
        }
      }

      .search-wrapper {
        padding: 0 24rpx;
        margin-bottom: 26rpx;
      }

      .p-container {
        .p-container-inner {
          max-height: 60vh;
          overflow: auto;
          min-height: 400px;
        }

        /deep/.u-radio-group--row {
          flex-direction: column;
        }

        .p-item-wrapper-box {
          padding: 0 35rpx;

          /deep/ .u-checkbox {
            pointer-events: none;
          }
        }

        .p-item {
          width: 100%;
          display: flex;

          .p-item-wrapper {
            display: flex;
            width: 100%;
            justify-content: space-between;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            margin-bottom: 20rpx;
            padding: 21rpx 0rpx 15rpx 0rpx;

            .p-item-l {
              display: flex;

              .avatar-img {
                width: 120rpx;
                height: 120rpx;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                margin-right: 30rpx;
              }

              .p-name-wrapper {
                .l-name {
                  font-weight: bold;
                  font-size: 36rpx;
                  color: #333333;
                }

                .l-num {
                  margin-top: 12rpx;
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #BBBBBB;
                }
              }
            }
          }

          .p-active {
            border: 1rpx solid #2488F5;
          }
        }

        .p-button {
          padding: 20rpx 28rpx 39rpx 28rpx;

          /deep/ .u-button__text {
            font-size: 36rpx !important;
          }
        }
      }
    }
  }
</style>